{% extends 'base.html' %}

{% block title %}登录{% endblock %}

{% block body %}
    {{ super() }}
<!-- login section ends -->
<section class="login">
    <h1 class="heading"> <span>登录</span> Login </h1>
    
    <div class="row">
        <form action='/login' method="post" novalidate>
            {{ form.csrf_token }}

            {{ form.name }}
            {% if form.name.errors.0 %}
            <div class="error">
                <span>{{ form.name.errors.0 }}</span>
            </div>
            {% endif %}

            {{ form.password }}
            {% if form.password.errors.0 %}
            <div class="error">
                <span>{{ form.password.errors.0 }}</span>
            </div>
            {% endif %}
            
            <div id="verify"></div>
            <input type="hidden" name="token">
            <div class="registerBtn">
                {{ form.submit() }}
            </div>

            <div class="loginBtn">
                <a href="/register">没有帐号,点我注册<i class="fas fa-registered"></i></a>
            </div>

            {% if tips %}
            <div class="errors">
                <span>{{ tips }}</span>
            </div>
            {% endif %}

        </form>
    </div>
</section>
<!-- login section ends -->  
{% endblock %}

{% block footer %}
    {{ super() }}
{% endblock %}

{% block script %}
    {{ super() }}
    
    <script src="https://cdn.dingxiang-inc.com/ctu-group/captcha-ui/index.js" crossorigin="anonymous" id="dx-captcha-script"></script>
    <script>
    var myCaptcha = _dx.Captcha(document.getElementById('verify'), {
        appId: 'ca4b8d957184d6e6d6e19e42600492f8',
        apiServer: 'https://cap.dingxiang-inc.com',
        // style: 'inline',
        // inlineFloatPosition: 'down',
        // style: 'popup',
        customLanguage: {
            init_inform: '拖动一下', // <-- 初始化时的提示文案
            slide_inform: '<span style="color:#f00;">滑动</span>补全缺口&nbsp;<span class="gradient_text">by 快乐云&trade;</span>',
            pass_by_server: '<span class="gradient_text">快乐云&trade无感验证成功span>'
        },
        success: function (token) {
            console.log('token:', token);
            document.getElementsByName('token')[0].value = token;
        }
      })
    </script>
{% endblock %}


